<template>
	<view class="content ">
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" @click="back">
						<u-icon name="arrow-left" color="#fff" size="36"></u-icon>
					</view>
					
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../../static/img/lawyerVersion/xz-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d">
				<view class="ay-ti u-m-t-12">
					协作广场
				</view>
				<view class="flex flex_cen u-m-t-20">
					<view class="flex">
						<image class="c1-1" src="../../../../static/img/home/c1-1.png" mode=""></image>
						<view class="ay-jj">
							精选真实案件
						</view>
					</view>
					<view class="flex u-m-l-40">
						<image class="c1-1" src="../../../../static/img/home/c1-1.png" mode=""></image>
						<view class="ay-jj">
							隐私保护
						</view>
					</view>
				</view>
				<view class="ay-gsa u-m-t-28" v-if="gnlist.length>0">
					恭喜{{gnlist[0].l_user.name}}{{gnlist[0].l_user.type==1?'律师':'法学生'}}在北京成案{{gnlist[0].price}}元
				</view>
			</view>
		</view>
		<view class="">
			<view class="ss-div flex flex_sb">
				<view class="flex">
					<view class="ss-div-item" @click="wcshow=true">
						{{type?type:'案件类型'}}
						<u-icon class="u-m-l-8" name="arrow-down-fill" color="#999999" size="20"></u-icon>
					</view>
					<view class="ss-div-item u-m-l-48" @click="showsr1=true">
						{{address?address:'全国'}}
						<u-icon class="u-m-l-8" name="arrow-down-fill" color="#999999" size="20"></u-icon>
					</view>
				</view>

				<view class="ss-div-item flex" @click="poshow=true">
					<image class="xs-img" src="../../../static/img/lawyerVersion/xs.png" mode=""></image>
					<view class="">
						筛选
					</view>
				</view>
			</view>
			<view class="or-div">
				<view class="or-item" v-for="(item,index) in dataList" :key="index">
					<view class="item-top flex flex_sb">
						<view class="flex">
							<image class="i-icon2" :src="item.avatar" mode="aspectFill"></image>
							<view class="font_16_333 font_weight u-m-l-16">
								{{item.task_name}}
							</view>
						</view>
						
					</view>
					<view class="item-main u-p-l-24 u-p-r-24 u-p-b-24">
						<view class="">
							{{item.info}}
						</view>
						<view class="flex u-m-t-26">
							<u-icon name="map" color="#272636" size="28"></u-icon>
							<view class="u-m-l-10">
								{{item.province_name}}
							</view>
							<view class="font_12_666 u-m-l-10">
								{{item.time}}
							</view>
						</view>
					</view>
					<!-- 已完成没有以下 -->
					<view class="or-bottom flex flex_sb u-p-l-24">
						<view class="font_weight colred">
							￥ <span class="u-font-40">{{item.price}}</span>  
						</view>
						<view class=" flex flex_end">
							<view class="btn1" @click="todetail(item)">
								立即抢单
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>



		<u-popup v-model="poshow" mode="right" :closeable="true">
			<view class="from-text">
				<view class="form-title">
					排序筛选
				</view>
				<view class="sx-div flex flex_wrap">
					<view class="sx-item" :class="sxIndex1==1?'sx-item-sel':''" @click="sxIndex1=1">
						默认发布时间
					</view>
					<view class="sx-item" :class="sxIndex1==2?'sx-item-sel':''" @click="sxIndex1=2">
						标的额从高到低
					</view>
					<view class="sx-item" :class="sxIndex1==3?'sx-item-sel':''" @click="sxIndex1=3">
						标的额从低到高
					</view>
				</view>
				<view class="form-title u-m-t-40">
					涉案金额
				</view>
				<view class="sx-div flex flex_wrap">
					<view class="sx-item" :class="sxIndex2==-1?'sx-item-sel':''" @click="sheanje('-1','-1')">
						全部
					</view>
					<view class="sx-item" v-for="(item,index) in jineList" :key="index"
					 :class="sxIndex2==index?'sx-item-sel':''" @click="sheanje(item,index)">
						{{item.name}}
					</view>
				</view>
				<view class="qd-btn" @click="paixu">
					确定
				</view>
			</view>
		</u-popup>
		
		<!-- <u-picker :params="params" mode="region" confirm-color="#651321" v-model="showsr1" @confirm="regionconfirm1"></u-picker> -->
		<u-select v-model="showsr1" mode="single-column" :list="addressList" @confirm="regionconfirm1" value-name="id" label-name="name"></u-select>
		<u-picker mode="selector" confirm-color="#20C064" :range="selector" v-model="wcshow" range-key="name"
			@confirm="showconfirm"></u-picker>
	</view>
</template>

<script>
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	export default {
		data() {
			return {
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#6D39A3'],
					slideBackgroundColor: [1, '#6D39A3']
				},
				addressList:[],
				params: {
					province: true,
					city: true,
					area: true
				},

				chboxSel: false,
				poshow: false,

				sxIndex1: -1,
				sxIndex2: -1,
				
				gnlist:[],
				jineList:[],
				showsr1:false,
				address:'',
				type:'',
				wcshow:false,
				selector: [],
				dataList:[],
				
				
				cate_id:0,//服务类型 0全部 3图文 2电话
				tag_id:'',//案件类型id
				province:'',//area.id
				price_dur_min:'',//涉案金额最小值
				price_dur_max:'',//涉案金额最大值
				this_province:0,//是否本省 1是0否
				orderby:'created_at desc' ,//排序 created_at desc,price asc\desc
				
				
				total:0,
				pageNum:1,
				pageSize:10,
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize > this.total) {
				// uni.hideNavigationBarLoading();
			} else {
				this.pageNum++;
				this.getList()
			}
		},
		onShow() {
			this.pageNum = 1
			this.fuwuList()
			this.getList()
			this.gegnlist()
			this.getjineList()
			this.getaddrerss()
		},
		methods: {
			getaddrerss(){
				this.$api({
					url: '/getChinaArea',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.addressList = res.data
						this.addressList.unshift({
							name:'全国',
							id:''
						})
					}
				})
			},
			sheanje(item,index){
				this.sxIndex2=index
				if(item=='-1'){
					this.price_dur_min = ''
					this.price_dur_max = ''
				}else{
					this.price_dur_min = item.min
					this.price_dur_max = item.max
				}
			},
			gegnlist(){
				this.$api({
					url: '/lawyer/success_order',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						limit:10
					},
				}).then(res => {
					if (res.code == 1) {
						this.gnlist = res.data.data
					} 
				})
			},
			getjineList(){
				this.$api({
					url: '/case_price_range',
					method: 'get',
					
				}).then(res => {
					this.jineList = res
				})
			},
			getList(){
				this.$api({
					url: '/lawyer/apply_square',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						task_id:this.tag_id,
						province:this.province,
						// cate_id:this.cate_id,
						price_dur_min:this.price_dur_min,
						price_dur_max:this.price_dur_max,
						// this_province:this.this_province,
						orderby:this.orderby,
						
						page:this.pageNum,
						limit:this.pageSize,
					},
				}).then(res => {
					if (res.code == 1) {
						this.poshow = false
						// this.dataList = res.data.data
						
						
						this.total=res.data.total
						let data = res.data.data
						if (this.pageNum == 1) {
							this.dataList = data
						} else {
							this.dataList = [...this.dataList, ...data]
						}
					} 
				})
			},
			fuwuList(){
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:1 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector = res.data
						
						this.selector.unshift({
							name:'全部',
							id:''
						})
					}
				})
			},
			showconfirm(e) {
				this.pageNum = 1
				this.type = this.selector[e].name
				this.tag_id = this.selector[e].id
				this.getList()
				// console.log(e)
			},
			regionconfirm1(e) {
				this.pageNum = 1
				// this.address = e.area.label
				// this.province = e.area.value
				this.address = e[0].label
				this.province = e[0].value
				this.getList()
				console.log(e)
			},
			paixu(){
				this.pageNum = 1
				if(this.sxIndex1==1){
					this.orderby = 'created_at desc'
				}else if(this.sxIndex1==2){
					this.orderby = 'price desc'
				}else if(this.sxIndex1==3){
					this.orderby = 'price asc'
				}
				
				this.getList()
			},
			back() {
				uni.navigateBack()
			},
			todetail(e) {
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/index/xiezuoDetail?id="+e.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.colred{
		color: #FC3A30;
	}
	.from-text {
		/* position: relative; */
		width: 570rpx;
		padding: 0 30rpx;
		padding-top: 220rpx;
		position: relative;
		height: 100%;

		.form-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			margin-bottom: 24rpx;
		}

		.sx-div {

			.sx-item {
				background: #F5F5F7;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				padding: 12rpx 22rpx;
				font-size: 24rpx;
				color: #373737;
				margin-right: 22rpx;
				margin-bottom: 24rpx;

				&-sel {
					background: #FFEBEB;
					color: #F92626;
				}
			}
		}

		.qd-btn {
			width: 506rpx;
			height: 92rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 92rpx;
			position: absolute;
			bottom: 40rpx;

		}
	}



	



	.ss-div {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		padding: 0 32rpx;

		.ss-div-item {
			font-size: 28rpx;
			color: #333333;

			.xs-img {
				width: 24rpx;
				height: 28rpx;
				margin-right: 12rpx;
			}
		}
	}

	.nav_wrap {
		width: 100vw;
		position: relative;
		height: 88rpx;

		.back_wrap {
			position: absolute;
			left: 24rpx;
		}
		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
			
		}
	}

	/deep/.u-tab-bar {
		background-color: #FC3A30 !important;
	}

	.main-div {
		position: relative;
		width: 100%;
		min-height: 400rpx;

		.main-bg {
			width: 100%;
			height: 400rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.m-d {
			width: 100%;
			// height: 400rpx;
			position: relative;
			padding-top: 88rpx;
			z-index: 2;
			text-align: center;

			.c1-1 {
				width: 24rpx;
				height: 24rpx;
			}

			.ay-ti {
				font-weight: bold;
				font-size: 44rpx;
				color: #FFFFFF;
			}

			.ay-jj {
				font-weight: bold;
				font-size: 20rpx;
				color: #FFFFFF;
				margin-left: 8rpx;
			}

			.ay-gsa {
				font-size: 24rpx;
				color: #FFFFFF;
				width: 392rpx;
				height: 48rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				margin: 0 auto;
				line-height: 48rpx;
			}
		}
	}
	
	.or-div {
		padding: 32rpx;
	
		.or-item {
			width: 686rpx;
			// height: 568rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 32rpx;
	
			.item-top {
				padding: 16rpx 24rpx;
				// border-bottom: 2rpx solid #F1F1F1;
	
				.i-icon {
					width: 48rpx;
					height: 48rpx;
				}
				
				.zt {
					font-weight: 600;
					font-size: 28rpx;
					color: #FC3A30;
				}
			}
			.i-icon2{
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background-color: #eee;
			}
			.item-main {
				
				
				
	
	
			}
	
			.or-bottom {
				height: 100rpx;
				border-top: 2rpx solid #F1F1F1;
				padding-right: 24rpx;
	
				.btn1 {
					width: 160rpx;
					height: 64rpx;
					background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
					margin-left: 16rpx;
				}
	
				.btn2 {
					width: 160rpx;
					height: 64rpx;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					border: 2rpx solid #ADADAD;
					font-size: 28rpx;
					color: #666666;
					line-height: 64rpx;
					text-align: center;
					margin-left: 16rpx;
				}
			}
		}
	}
</style>